<template>
	<view class="box">
		<view class="chooseAvartar" @click="chooseAvartar">
			<view class="avartar">
				<image :src="user.avatar" mode="widthFix"></image>
			</view>
		</view>
		<view class="tips">点击更换头像</view>
		<view class="form">
			<view class="nickname">
				<text>昵称</text> <input type="text" class="nickname" v-model="user.nickname">
			</view>
			<view class="sex">
				<text>性别</text>
				<radio-group name="sex" class="sex" @change="changeSex">
					<label class="radio">
						<radio value="男" :checked="user.sex=='男'" color="#4aaf45" />男
					</label>
					<label class="radio">
						<radio value="女" color="#4aaf45" :checked="user.sex=='女'" />女
					</label>
				</radio-group>
			</view>
			<view class="birthday">
				<text>生日</text>
				<picker class="birthday" mode="date" :value="user.birthday" @change="bindDateChange">
					<view class="uni-input">{{user.birthday||currentDate()}}</view>
				</picker>
			</view>
			<button class="btn" @click="updateUser">修改</button>
		</view>
	</view>
</template>

<script>
	import users from  '../../apis/users/index.js'
	
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup(props) {

			//定义变量
			const state = reactive({

			})

			//将传递过来的参数直接打包变成可以用于动态绑定的变量
			const user = ref(props);
			console.log(props, user);

			//生成一个默认时间
			const currentDate = () => {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				return `${year}-${month}-${day}`;
			}

			//更新用户信息到数据服务器
			const updateUser = () => {
				console.log(user);
				users.editUserInfo({
						//留下最后的作业，大家争取独立完成
				})
			}

			//选择生日
			const bindDateChange = (e) => {
				user.value.birthday = e.detail.value;
			}

			//选择性别
			const changeSex = (e) => {
				user.value.sex = e.detail.value;
			}

			//选择并上传头像
			const chooseAvartar = () => {
				//选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ["compressed"],
					sourceType: ["album"],
					success: (res) => {
						let tempImg = res.tempFilePaths[0];
						uni.showLoading({
							title: "上传中..."
						})
						//上传图片
						uni.uploadFile({
							url: "https://test.galayun.com/smallprogapi/appcirclepost/PostUniImages",
							filePath: tempImg,
							name: "file",
							success: (uploadRes) => {
								uni.showToast({
									title: "头像上传成功！"
								})
								user.value.avatar = JSON.parse(uploadRes.data).data.Data[0];

							}
						})


					}
				})
			}

			return {
				...toRefs(state),
				user,
				currentDate,
				bindDateChange,
				changeSex,
				updateUser,
				chooseAvartar

			}

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 15rpx;

		.chooseAvartar {
			width: 250rpx;
			height: 250rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 10rpx solid #efefef;
			margin: 8px auto;
			// padding: 3rpx;

			.avartar {

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.tips {
			font-size: 32rpx;
			color: #888888;
			text-align: center;
		}

		.form {

			view {
				padding: 30rpx;
				border-bottom: 1px #efefef solid;
				font-size: 32rpx;
				vertical-align: middle;
				line-height: 50rpx;

				text {
					display: inline-block;
					margin-right: 40rpx;
				}

				.nickname,
				.birthday,
				.sex {
					display: inline-block;
					top: 0rpx;
				}
			}

			.btn {
				background-color: #4aaf45;
				color: #ffffff;
				font-weight: 600;
			}
		}

	}
</style>
